<template>
    <div class="app-container">
         <div class="set-up" v-show="activeName=='second'"  @click="dialogVisible = true"><el-button type="primary" size="mini">新建</el-button></div>
         <el-tabs v-model="activeName" @tab-click="handleClick" class="user-group">
            <el-tab-pane label="全部用户" name="first">
                <div class="choose-search">
                    <el-select v-model="queryParams.keyWord" placeholder="请选择">
                        <el-option
                        v-for="item in searchOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                    <div class="search-group"><input type="text" placeholder="搜索" v-model="queryParams.keyValue" @keyup="enterSearchUser"><i class="el-icon-search" @click="getUserList"></i></div>
                </div>
                <el-table v-loading="loading" border :data="getActivitiesDetails">
                    <el-table-column label="用户名" width="160" align="center" prop="nickname">
                        <template slot-scope="scope">
                            <span>{{scope.row.nickname!=null?scope.row.nickname:'--'}}</span>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column label="unionID" width="150" align="center" prop="wechatUnionid">
                        <template slot-scope="scope">
                            <span>{{scope.row.nickname!=null?scope.row.nickname:'--'}}</span>
                        </template>
                    </el-table-column> -->
                    <el-table-column label="手机号" width="150" align="center" prop="mobile">
                        <template slot-scope="scope">
                            <span>{{scope.row.mobile!=null?scope.row.mobile:'--'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="经纪人ID" width="150" align="center" prop="agentId">
                        <template slot-scope="scope">
                            <span>{{scope.row.agentId!=null?scope.row.agentId:'--'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="来源渠道" width="150" prop="channelName" align="center"> 
                        <template slot-scope="scope">
                            <span>{{scope.row.channelName!=null?scope.row.channelName:'--'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="场景值" width="150" prop="sceneName" align="center"> 
                        <template slot-scope="scope">
                            <span>{{scope.row.sceneName!=null?scope.row.sceneName:'--'}}</span>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column label="所属区经" width="100" color="blue" align="center" prop="sourceUserName">
                        <template slot-scope="scope">
                            <span>{{scope.row.sourceUserName!=null?scope.row.sourceUserName:'--'}}</span>
                        </template>
                    </el-table-column> -->
                    <el-table-column label="授权城市" width="100" color="blue" align="center" prop="authCity">
                        <template slot-scope="scope">
                            <span>{{scope.row.authCity!=null?scope.row.authCity:'--'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="会员属性" width="100" color="blue" align="center" prop="memberSign">
                        <template slot-scope="scope">
                            <!-- <span>{{scope.row.memberSign!=null?scope.row.memberSign:'--'}}</span> -->
                            <span v-if="scope.row.memberSign==0">非会员</span>
                            <span v-if="scope.row.memberSign==1">会员</span>
                            <span v-if="scope.row.memberSign==2">失效会员</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="会员金额" width="100" color="blue" align="center" prop="memberAmount">
                        <template slot-scope="scope">
                            <span>{{scope.row.memberAmount!=null?scope.row.memberAmount:'--'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="经纪人创建日期" width="120" color="blue" align="center" prop="agentCreateTime">
                        <template slot-scope="scope">
                            <span>{{scope.row.agentCreateTime!=null?scope.row.agentCreateTime:'--'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="首次下单时间" width="100" color="blue" align="center" prop="memberStartDate">
                        <template slot-scope="scope">
                            <span>{{scope.row.memberStartDate!=null?scope.row.memberStartDate:'--'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="到期日" width="100" color="blue" align="center" prop="memberEndDate">
                        <template slot-scope="scope">
                            <span>{{scope.row.memberEndDate!=null?scope.row.memberEndDate:'--'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="最近登录时间" width="100" color="blue" align="center" prop="lastDelTime">
                        <template slot-scope="scope">
                            <span>{{scope.row.lastDelTime!=null?scope.row.lastDelTime:'--'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="体验数" width="100" color="blue" align="center" prop="delCnt">
                        <template slot-scope="scope">
                            <span>{{scope.row.delCnt!=null?scope.row.delCnt:'--'}}</span>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column label="会员归属销售agentID" width="150" color="blue" align="center" prop="sourceUserId">
                        <template slot-scope="scope">
                            <span>{{scope.row.sourceUserId!=null?scope.row.sourceUserId:'--'}}</span>
                        </template>
                    </el-table-column> -->
                    <el-table-column label="归属销售名称" width="100" color="blue" align="center" prop="sourceUserName">
                        <template slot-scope="scope">
                            <span>{{scope.row.sourceUserName!=null?scope.row.sourceUserName:'--'}}</span>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column label="所属销管agentID" width="150" color="blue" align="center" prop="channelAdmin_id">
                        <template slot-scope="scope">
                            <span>{{scope.row.channelAdmin_id!=null?scope.row.channelAdmin_id:'--'}}</span>
                        </template>
                    </el-table-column> -->
                    <el-table-column label="所属销管名称" width="100" color="blue" align="center" prop="channelAdminName">
                        <template slot-scope="scope">
                            <span>{{scope.row.channelAdminName!=null?scope.row.channelAdminName:'--'}}</span>
                        </template>
                    </el-table-column>
                    
                </el-table> 
                <pagination
                    v-show="userListTotal > 0"
                    :total="userListTotal"
                    :page.sync="queryParams.page"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getUserList"
                    />

            </el-tab-pane>

            <el-tab-pane label="用户分群" name="second">
                <div class="choose-group">
                    <el-checkbox-group 
                        @change="getGroupList"
                        v-model="groupQueryParams.own"
                        class="choose-group-box">
                        <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
                    </el-checkbox-group>
                    <div class="search-group">
                        <input type="text" placeholder="搜索分群" v-model="groupQueryParams.groupName" @keyup='enterSearch'>
                         <!-- <el-autocomplete
                            class="inline-input"
                            v-model="groupQueryParams.groupName"
                            :fetch-suggestions="querySearch"
                            placeholder="搜索分群"
                            :trigger-on-focus="false"
                            @select="getGroupList"
                        ></el-autocomplete> -->
                        <i class="el-icon-search" @click="getGroupList"></i></div>
                </div>
                <!-- <div class="set-up"><el-button type="primary" size="mini" @click="dialogVisible = true">新建</el-button></div> -->
                    <el-dialog
                        title="用户分群名称"
                        :visible.sync="dialogVisible"
                        width="30%">
                        <el-input v-model="setGroup"></el-input>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisible = false">取 消</el-button>
                            <el-button type="primary" @click="confirmGroupName">确 定</el-button>
                        </span>
                    </el-dialog>

                <el-table v-loading="grooupLoading" border :data="getGroupDetails">
                    <el-table-column label="分群名" width="200" align="center" prop="groupName">
                    </el-table-column>
                    <el-table-column label="分群人数" width="150" align="center" prop="totalPeople">
                    </el-table-column>

                    <el-table-column label="创建方式" width="200" align="center" prop="createType">
                        <template slot-scope="scope">
                            <span v-if="scope.row.createType=='RULE'">规则创建</span>
                            <span v-else>系统预置</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="创建人" width="150" align="center" prop="createByName"> 
                    </el-table-column>
                    <el-table-column label="更新时间" width="200" color="blue" align="center" prop="updateTime">
                    </el-table-column>
                    <el-table-column label="计算时间" width="200" color="blue" align="center" prop="actionTime">
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
                        <template slot-scope="scope">
                            <el-button
                                size="mini"
                                type="text"
                                @click="goRules(scope.row, '查看')"
                                v-if="scope.row.fromTable=='shulan_ao.ao_oper_user_info'"
                            >查看</el-button>
                            <el-button
                                size="mini"
                                type="text"
                                @click="goRules(scope.row, '修改')"
                                v-if="(scope.row.createByUserId==userId)&&scope.row.fromTable=='shulan_ao.ao_oper_user_info'"
                            >修改</el-button>
                                <!-- v-if="scope.row.id==userId" -->
                            <el-button
                                size="mini"
                                type="text"
                                @click="deleteGroup(scope.row.groupId)"
                                v-if="scope.row.createByUserId==userId&&scope.row.fromTable=='shulan_ao.ao_oper_user_info'"
                            >删除</el-button>
                        </template>
                    </el-table-column>
                </el-table> 
                <pagination
                     v-show="groupListTotal > 0"
                    :total="groupListTotal"
                    :page.sync="groupQueryParams.page"
                    :limit.sync="groupQueryParams.pageSize"
                    @pagination="getGroupList"
                />

            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import { getTotalAgentUser, getGroupList, changeGroupStatue } from "@/api/smartRun/groupManage";
import { mapGetters } from "vuex";
const cityOptions = ['由我创建'];
export default {
    name: 'groupManage',
    data() {
        return {
            loading: false,
            grooupLoading: false,
            activeName: 'first',
            // activeName: 'second',
            queryParams: {
                keyWord: 'mobile',
                page: 1,
                pageSize: 10,
                keyValue: '',
            },
            groupQueryParams: { 
                page: 1,
                pageSize: 10,
                groupName: '',
                own: false,
            },
            userListTotal: 0,
            groupListTotal: 0,
            getActivitiesDetails: [],
            getGroupDetails:[],
            checkedCities: [''],
            cities: cityOptions,
            setGroup: '',
            searchOptions: [{
                value: 'mobile',
                label: '手机号',
            },{
                value: 'nickname',
                label: '微信昵称',
            },{
                value: 'agentId',
                label: '经纪人ID',
            },{
                value: 'channelName',
                label: '来源渠道',
            }],
            searchValue: 'phone',
            chooseSearchValue: '',
            page: 1,
            pageSize: 10,
            groupList: [],
            dialogVisible: false,
        }
    },
    methods: {
        stateFormat(row, column){
            for(let key in row){
                            console.log(row, 999)
                if(row[key]==null){
                    return '--'
                } else {
                    return row[key]
                }
            }
        },
        handleQuery(){},
        handleClick(tab, event) {
        
            localStorage.setItem('listTab', tab.index)
            if(tab.index==0){
                this.getUserList();
            } else {
                this.getGroupList();
            }
        },
        confirmGroupName(){
            if(this.setGroup==''){
                this.$message({
                    message: '请填写用户分群名称！',
                    type: 'error'
                });
                return
            }
            this.$router.push({
                name: 'GroupRules',
                query: {groupName: this.setGroup, type: '新建'}
            });
        },
        goRules(row, type){
            let groupId = row.groupId;
            this.$router.push({
                name: 'GroupRules',
                query: {
                    groupId : groupId,
                    type: type
                }
            });
        },
        navigateToEdit(row){
            this.$router.push({
                name: 'groupRules',
                query: {groupName: this.setGroup}
            });
        },
        getTotalAgentUser(){
            getTotalAgentUser({
                keyWord: this.searchValue,
                page: this.page,
                pageSize: this.pageSize,
                keyValue: this.chooseSearchValue
            }).then(response => {
                this.getActivitiesDetails = response.data.content;
            })
        },
        querySearch(queryString, cb) {
            var groupList = this.groupList;
            var results = queryString ? groupList.filter(this.createFilter(queryString)) : groupList;
            // 调用 callback 返回建议列表的数据
            cb(results);
        },
        createFilter(queryString) {
            return (restaurant) => {
            return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
        },
        // loadAll() {
        //     return [
        //         { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
        //         { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
        //     ];
        // },
        getGroupList() {
            this.grooupLoading = true;
            getGroupList(this.groupQueryParams).then(response => {
                console.log(response, 666)
                this.getGroupDetails = response.data.list;
                this.groupListTotal = response.data.total;
                this.grooupLoading = false;
            })
        },
        getAllGroupList(){
            let groupQueryParams = JSON.parse(JSON.stringify(this.groupQueryParams)) 
            groupQueryParams.pageSize = 100;
            getGroupList(groupQueryParams).then(response => {
                let list = response.data.list,groupAll=[];
                //  groupAll[0]={};
                // groupAll[0].value = 'san';
               list.map((v, index)=>{
                   groupAll[index] = {};
                   groupAll[index].value = v.groupName;
               })
               this.groupList = groupAll;
            })
        },
        getUserList(){
            this.loading = true;
            getTotalAgentUser(this.queryParams).then(response => {
                this.getActivitiesDetails = response.data.list;
                this.userListTotal = response.data.total;
                this.loading = false;
            })
        },
        deleteGroup(id){
            changeGroupStatue({
                groupId: id,
                statue: 1
            }).then(res=>{
                this.getGroupList();
            })
        },
        enterSearch(e){
            if(e.key == 'Enter'){
                this.getGroupList();
            }
        },
        enterSearchUser(e){
            if(e.key == 'Enter'){
                this.getUserList();
            }
        },
    },
    computed: {
        ...mapGetters(["userId"]),
    },
    created(){
        console.log(localStorage.getItem('listTab'),'created')
        if(localStorage.getItem('listTab')==1){
            this.activeName='second';
            this.getGroupList(); 
        }else {
            this.activeName='first';
            this.getUserList();
        }
        // this.getGroupList();
    },
    mounted(){
        this.getAllGroupList();
        // console.log(this.userId)
    },
    destroyed(){
        console.log('destroyed')
        // localStorage.removeItem('listTab')
    }
}
</script>
<style scoped>
    .search-group {
        margin-left: 20px;
        border: 1px solid #DCDFE6;
        font-size: 12px;
        padding: 5px 10px;
        display: flex;
        align-items: center;
    }
    .choose-group {
        display: flex;
        align-content: center;
        justify-content: flex-end;
        margin-bottom: 10px;
    }
    .set-up {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 30px;
        position: absolute;
        top: 20px;
        right: 20px;
        z-index: 1;
    }
    .choose-search {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 30px;
    }
    .choose-search .search-group {
        margin-left: 0;
        border-radius: 0 4px 4px 0;
        border-left: none;
    }
</style>
<style>
    .choose-group-box,.choose-group-box .el-checkbox{
        display:flex;
        align-items: center;
        justify-content: center;
    }
    .choose-group-box .el-checkbox__inner {
        border-radius: 50%;
        width: 12px;
        height: 12px;
    }
    .choose-group-box .el-checkbox__label {
        padding-left: 5px;
    }
    .choose-group-box .el-checkbox__inner::after {
        height: 5px;
        left: 3px;
    }
    .search-group input {
        border: none;
        outline: none;
    }
    .choose-search .el-input__inner {
        border-radius: 4px 0 0 4px;
        border-right: none;
        width: 120px;
    }
    .choose-search .el-select .el-input.is-focus .el-input__inner,.choose-search .el-select .el-input__inner:focus {
        border-color:#DCDFE6;
    }
    .user-group .el-tabs__content{
        padding-bottom: 10px;
    }
</style>